<template>
    <div class="content-title-box">
        <el-breadcrumb separator=">">
            <template v-for="(item, index) in route">
                <el-breadcrumb-item v-if="item.meta?.title" :key="index" :to="item.path" class="titleFont">{{
                    item.meta?.title
                }}</el-breadcrumb-item>
            </template>
        </el-breadcrumb>
    </div>
</template>

<script setup>
import { onBeforeMount } from "vue";
const props = defineProps({
    route: {
        type: Object,
        default: {}
    }
})
onBeforeMount(() => {
    console.log(props.route, '路由');
})
</script>

<style lang="less" scoped>
.content-title-box {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    background-color: #ffff;
    height: 50px;
    line-height: 50px;
}

/* 不被选中时的颜色 */
// .bread :deep(span) {
//     color: #fff;
// }

.titleFont {
    font-family: 'Mastere';
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
}
</style>
